<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>这是网页的title</title>
    <style>
        
    </style>
</head>
<body>
    <form class="f1"></form>
    <form class="f2"></form>
    <b>加粗的文字1</b>
    <form class="f3"></form>
    <b>加粗的文字2</b>
    <b>加粗的文字3</b>
    <div class="box">
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>
    </div>
    <em>倾斜的文字1</em>
    <em>倾斜的文字2</em>
    <form class="f4"></form>
    <form class="f5"></form>
    <em>倾斜的文字3</em>
    <form class="f6"></form>
</body>
<script>
    var box = document.querySelector(".box");
    // 多个子元素
    console.log( box.children );
    // 单个子元素
    console.log( box.firstElementChild );
    console.log( box.lastElementChild );
    // 单个父元素
    console.log( box.parentNode );
    // 单个兄弟元素
    console.log( box.previousElementSibling );
    console.log( box.nextElementSibling );

    
    // ======
    console.log( "=======" )

    // 根节点
    console.log( document );
    // 根元素节点
    console.log( document.documentElement );
    // body元素节点
    console.log( document.body );
    // head元素节点
    console.log( document.head );
    // 所有form元素节点
    console.log( document.forms );


    // 不是选择器
    // 直接操作了title标签的内容
    console.log( document.title );
    document.title = "hello";
    
    
</script>
</html>